<script setup lang="ts">
import { ArrowBack } from '@vicons/ionicons5';
import {computed} from "vue";

interface Props {
  /** 左侧标题 */
  title?: string;
  /** 右侧按钮是否显示 */
  rightShow?: boolean;
  /** 右侧按钮标题 */
  rightTitle?: string;
  /** 右侧按钮图标是否展示 */
  iconShow?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  rightShow: false,
  rightTitle: '',
  iconShow: false
});

// const rightImg = computed(() => {
//   return props.rightIcon ? `@/assets/imgs/${props.rightIcon}` : '';
// })

const emit = defineEmits(['backClick', 'rightButtonClick']);

// 返回上一页
function goBackClick() {
  emit('backClick');
}

// 右侧按钮点击事件
function rightButtonClick() {
  emit('rightButtonClick');
}
</script>

<template>
  <div class="w-full flex-y-center">
    <NCard :bordered="false" size="small" class="card-wrapper header-card">
      <div class="flex-y-center pr-36px">
        <NButton :bordered="false" strong quaternary size="large" @click="goBackClick">
          <template #icon>
            <NIcon size="20" color="#333">
              <ArrowBack />
            </NIcon>
          </template>
        </NButton>
        <div class="w-1px bg-#BFC1C5 ml-12px mr-12px h-20px"></div>
        <span class="font-size-18px color-#333 font-bold">{{title}}</span>
      </div>
    </NCard>
    <NCard v-if="rightShow" :bordered="false" size="small" class="card-wrapper w-200px ml-36px header-card">
      <NButton :bordered="false" strong quaternary icon-placement="right" size="large" @click="rightButtonClick">
        <template #icon>
          <img v-if="iconShow" src="@/assets/imgs/icon-resource.png" width="20" alt="" />
        </template>
        {{rightTitle}}
      </NButton>
    </NCard>
  </div>
</template>

<style scoped lang="scss">
.header-card {
  background: rgba(255,255,255,0.3);
  border: 1px solid #faf9fd;
}
</style>
